import 'package:flutter/material.dart';
import 'progressbar.dart';
class Running extends StatefulWidget {
  @override
  _RunningState createState() => _RunningState();
}

class _RunningState extends State<Running> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(        
      body: Stack(
        children: <Widget>[
          Container(//提供背景
            height: 750,
            width: 500,
            decoration: BoxDecoration(
              image:DecorationImage(image:AssetImage('images/a3.jpg'),fit: BoxFit.cover),
              //color: Colors.red
            ),
          ),
          Container(
                  margin: EdgeInsets.fromLTRB(0, 20, 0, 0),
                  child:Row(  
                    crossAxisAlignment: CrossAxisAlignment.start,                  
                    children: <Widget>[                      
                      FloatingActionButton(
                        elevation: 0,                        
                        backgroundColor:Color.fromARGB(0, 0, 0, 0),
                        mini: true,                        
                        child: Icon(Icons.arrow_back),
                        heroTag: '4',
                      ),                                           
                    ],
                  ) ,
                  //decoration: BoxDecoration(color:Colors.red,),
                  height: 50,
                  width: 500,                  
                ),
          Card(//总卡片
            elevation: 0,
            shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(10)),
            margin: EdgeInsets.fromLTRB(0, 80, 0, 0),
            color: Color.fromARGB(0,80,255,255),
            child: Column(
              children: <Widget>[                
                Container(
                  child:Row(  
                    crossAxisAlignment: CrossAxisAlignment.start,                  
                    children: <Widget>[
                      SizedBox(width: 16,),
                      FloatingActionButton(                        
                        backgroundColor:Color.fromARGB(85, 0, 0, 0),
                        mini: true,                        
                        child: Icon(Icons.close),
                        heroTag: '1',
                      ),
                      Expanded(child:SizedBox(width: 1,))//形成两个按钮中间的区域
                      ,
                      FloatingActionButton(
                        backgroundColor:Color.fromARGB(85, 0, 0, 0),
                        mini:true,
                        child: Icon(Icons.create),
                        heroTag: '2',
                      ),
                       FloatingActionButton(
                         backgroundColor:Color.fromARGB(85, 0, 0, 0),
                         mini:true,
                         child: Icon(Icons.more_vert),
                         heroTag: '3',
                      ),
                      SizedBox(width: 16,)
                    ],
                  ) ,
                  //decoration: BoxDecoration(color:Colors.red,),
                  height: 200,
                  width: 500,                  
                ),
                Card(     //下边的白色卡片             
                  margin: EdgeInsets.fromLTRB(0,0,0,0),
                  shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(10)),
                  elevation: 0,
                  child: Column(
                    children: <Widget>[
                      SizedBox(height: 12,),                      
                      ListTile(                  
                        contentPadding:EdgeInsets.symmetric(horizontal:24),                        
                        leading: Icon(Icons.stop,color: Colors.blue,size: 30,),
                        title: Text('Running',style: TextStyle(fontSize: 28,),),
                        //subtitle: Text('Sunday, May 15 8:00 - 9:00',style: TextStyle(fontSize: 18),),
                      ),
                      Container(
                        padding: EdgeInsets.fromLTRB(81, 0, 0, 0),
                        alignment: Alignment.topLeft,
                        color: Color.fromARGB(0, 100, 100, 100),
                        margin: EdgeInsets.fromLTRB(0, 0, 0, 0),
                        child: Text('Sunday, May 15 8:00 - 9:00',style: TextStyle(fontSize: 18),),
                      ), 
                      SizedBox(height:25 ,),
                      ListTile(
                        contentPadding:EdgeInsets.symmetric(horizontal: 24.0),
                        title: Text('4 sessions a week',style: TextStyle(fontSize: 17),),
                        subtitle: Text('1 hour, mornings',style: TextStyle(fontSize: 15)),
                        leading: Icon(Icons.flag,size: 30,),                        
                      ),
                      ListTile(
                        contentPadding:EdgeInsets.symmetric(horizontal: 24.0),
                        title: Text('4 sessions a week',style: TextStyle(fontSize: 17),),
                        subtitle: Text('1 hour, mornings',style: TextStyle(fontSize: 15)),
                        leading: Icon(Icons.add_alert,size: 30,),                        
                      ),
                      ListTile(
                        contentPadding:EdgeInsets.symmetric(horizontal: 24.0),
                        title: Text('4 sessions a week',style: TextStyle(fontSize: 17),),
                        subtitle: Text('1 hour, mornings',style: TextStyle(fontSize: 15)),
                        leading: Icon(Icons.favorite_border,size: 30,),                  
                      ),
                      SizedBox(height: 10,),
                      Align(
                        alignment: Alignment.bottomRight,
                        child:Container(                                                
                        //color: Colors.red,
                        height: 88,
                        width:375,
                        child:ListView(
                          scrollDirection: Axis.horizontal,
                          children: <Widget>[
                            Stack(
                              children: <Widget>[
                                Container(
                                  //color: Colors.yellow,
                                  height: 88,
                                  width: 88,
                                  child:GradientCircularProgressIndicator(
                                    value: 0.75,
                                    strokeCapRound: true,
                                    backgroundColor: Color.fromARGB(255, 239, 235, 239),
                                    colors: [Color.fromARGB(255, 0, 159, 230),Color.fromARGB(255, 0, 159, 230)],
                                    radius: 44,
                                    stokeWidth: 9,
                                  ) 
                                ),
                                Positioned(child: Text('3/4',textAlign: TextAlign.center,style: TextStyle(fontSize: 17,fontWeight: FontWeight.w500),),top: 33,left: 31,)
                              ],
                            ),
                            SizedBox(width: 17,),
                            Stack(
                              children: <Widget>[
                                Container(
                                  //color: Colors.yellow,
                                  height: 88,
                                  width: 88,
                                  child:GradientCircularProgressIndicator(
                                    value: 1,
                                    strokeCapRound: true,
                                    backgroundColor: Color.fromARGB(255, 239, 235, 239),
                                    colors: [Color.fromARGB(255, 0, 159, 230),Color.fromARGB(255, 0, 159, 230)],
                                    radius: 44,
                                    stokeWidth: 9,
                                  ) 
                                ),
                                Positioned(child: Text('4/4',textAlign: TextAlign.center,style: TextStyle(fontSize: 17,fontWeight: FontWeight.w500),),top: 33,left: 31,)
                              ],
                            ),
                            SizedBox(width: 17,),
                            Stack(
                              children: <Widget>[
                                Container(
                                  //color: Colors.yellow,
                                  height: 88,
                                  width: 88,
                                  child:GradientCircularProgressIndicator(
                                    value: 0.25,
                                    strokeCapRound: true,
                                    backgroundColor: Color.fromARGB(255, 239, 235, 239),
                                    colors: [Color.fromARGB(255, 0, 159, 230),Color.fromARGB(255, 0, 159, 230)],
                                    radius: 44,
                                    stokeWidth: 9,
                                  ) 
                                ),
                                Positioned(child: Text('1/4',textAlign: TextAlign.center,style: TextStyle(fontSize: 17,fontWeight: FontWeight.w500),),top: 33,left: 31,)
                              ],
                            ),
                            SizedBox(width: 17,),
                            Stack(
                              children: <Widget>[
                                Container(
                                  //color: Colors.yellow,
                                  height: 88,
                                  width: 88,
                                  child:GradientCircularProgressIndicator(
                                    value: 0.5,
                                    strokeCapRound: true,
                                    backgroundColor: Color.fromARGB(255, 239, 235, 239),
                                    colors: [Color.fromARGB(255, 0, 159, 230),Color.fromARGB(255, 0, 159, 230)],
                                    radius: 44,
                                    stokeWidth: 9,
                                  ) 
                                ),
                                Positioned(child: Text('2/4',textAlign: TextAlign.center,style: TextStyle(fontSize: 17,fontWeight: FontWeight.w500),),top: 33,left: 31,)
                              ],
                            ),
                         ],
                        )                    
                       ) ,                       
                      ),
                      SizedBox(height: 20,),
                      Divider(
                        height: 0,                       
                      ),
                      Row(
                        mainAxisAlignment:MainAxisAlignment.end ,
                        children: <Widget>[
                          FlatButton(
                            padding: EdgeInsets.all(26),                            
                            child: Text('Later',style: TextStyle(fontSize: 16,fontWeight: FontWeight.w700,color:Color.fromARGB(255, 44, 125, 216)),),
                          ),
                           FlatButton(
                            child: Text('Done',style: TextStyle(fontSize: 16,fontWeight: FontWeight.w700,color:Color.fromARGB(255, 44, 125, 216)),),
                          ),
                        ],

                      )
                                            
                    ],
                  ),
                  
                )


              ],
            ),
          ),
        ],
      ),
    );
  }
}